<template>
  <div id='updheadpic'>
    <div id='updheadpictitle'>
      <i class="el-icon-user"></i>
      <span>更换头像</span>
      <span id='updheadpictitlespan'>(最多只能放一张图！)</span>
    </div>
    <div id="upload">
      <!--elementui的上传图片的upload组件-->
      <el-upload
        class="upload-demo"
        ref="upload"
        list-type="picture-card"
        action="http://localhost:3000/users/uploadHeadPic"
        :limit="1"
        :before-upload="beforeupload"
        :auto-upload="false"
        :multiple="true"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
   inject:['reload'],   //实现数据库变化时的实时更新（注入）  
  name: "test",
  data() {
    return {
      company_id: "10001",
      fileList: [],
      form: {
        name: "" //绑定表单元素的属性
      },
      param: "" // 表单最后提交的参数对象
    };
  },
  methods: {
    onSubmit() {
      let self=this;    //1.1实现数据库变化时的实时更新（调用）
      let _this = this;
      var names = _this.form.name;
      this.$refs.upload.submit();
      //将非表单元素的数据也添加到参数对象中；
      this.param.append("company_id", _this.company_id);
      //将表单元素的数据也添加到参数对象中；
      this.param.append("caption", names);
      //设置提交请求头，适用于上传文件
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      // //调用接口，执行上传所有数据的操作
      this.$axios
        .post("http://localhost:3000/users/uploadHeadPic", this.param, config)
        .then(function(result) {
          console.log('hhhhh',result);
          self.reload()   //1.2实现数据库变化时的实时更新（调用）
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //当上传文件组件submit之前触发执行
    beforeupload(file) {
      this.param = new FormData();
      this.param.append("headPic", file);
      console.log('param',this.param);
      return false;
    }
  }
};
</script>
<style lang="css" scoped>
#updheadpic{
  width:50%;
  /* height: 100px; */
  /* border:1px solid red; */
  position: absolute;
  left:300px;
}
#updheadpictitle{
  width:80%;
  height:50px;
  line-height: 50px;
  /* border: 1px solid black; */
  font-size: 20px;
}
#updheadpictitlespan{
  font-size: 15px;
}
.el-button{
  position: relative;
  top:-5px;
  left: -80px;
}

</style>
<style>
.el-upload input{
  display: none !important;
}


</style>